<template>
  <div class="editConfig">
    <Form :model="modelForm" ref="modelForm" :rules="rule">
      <Row>
        <Col :span="12">
          <Form-Item prop="writePermission" label="填报权限：">
            <i-switch v-model="modelForm.writePermission">
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-switch>
          </Form-Item>
        </Col>
        <Col :span="12">
          <Form-Item prop="examinePermission" label="审批权限：">
            <i-switch v-model="modelForm.examinePermission">
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-switch>
          </Form-Item>
        </Col>
      </Row>
      <Row>
        <Col :span="11">
          <Form-Item prop="taskSubmitYear" label="填报周期：" :label-width="110">
            <Select v-model="modelForm.taskSubmitYear" placeholder="请选择年度">
              <Option v-for="item2 in yearList" :key="item2.key" :value="item2.value">{{item2.value}}</Option>
            </Select>
          </Form-Item>
        </Col>
        <Col :span="2" style="text-align: center; padding-top:5px">
        --
        </Col>
        <Col :span="11">
          <Form-Item prop="taskSubmitQuarter" label="">
            <Select v-model="modelForm.taskSubmitQuarter" placeholder="请选择季度">
              <Option v-for="item2 in datasList" :key="item2.key" :value="item2.value">{{item2.value}}</Option>
            </Select>
          </Form-Item>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import sysConfigApi from '@/api/sysConfig.js'
export default {
  name: 'editConfig',
  props: {
    writePermission: {
      typeof: Boolean
    },
    examinePermission: {
      typeof: Boolean
    },
    type: {
      typeof: String
    },
    reportName: {
      typeof: String
    },
    year: {
      typeof: String
    },
    quarter: {
      typeof: String
    }
  },
  data() {
    return {
      timer: null,
      taskId: '',
      yearList: [
        {key:'2021',value:'2021'},
        {key:'2022',value:'2022'},
        {key:'2023',value:'2023'},
        {key:'2024',value:'2024'},
        {key:'2025',value:'2025'},
      ],
      datasList:[
        {key:'0',value:'1'},
        {key:'1',value:'2'},
        {key:'2',value:'3'},
        {key:'3',value:'4'},
      ],
      modelForm: {
        writePermission: true,
        examinePermission: true,
        taskSubmitYear: '',
        taskSubmitQuarter: ''
      },
      rule: {
        writePermission: [{required: true, trigger: "blur", type: 'boolean'}],
        examinePermission: [{required: true, trigger: "blur", type: 'boolean'}],
        taskSubmitYear: [{required: true, message: "请选择填报年度", trigger: "change"}],
        taskSubmitQuarter: [{required: true, message: "请选择填报季度", trigger: "change"}]
      }
    }
  },
  created() {
    this.modelForm = {
      writePermission: this.writePermission,
      examinePermission: this.examinePermission,
      taskSubmitYear: this.year ? this.year : '',
      taskSubmitQuarter: this.quarter ? this.quarter : '',
    },
    this.$emit("SetTitle", "填报配置");
    this.$emit("SetPageWidth", 600);
    this.$emit("SetPageMinHeight", 300);
    this.$emit("SetScroll", 'inherit');
    this.$emit("SetPageActions", [
      {
        text: '确定',
        theme: "primary",
        action: "submit",
        handle: () => {
          this.$refs['modelForm'].validate(valid => {
            if (valid && !this.timer) {
              this.$confirm({
                title:"",
                content: `您即将更新系统填报配置，您要继续吗？`
              }).then(()=>{
                this.$emit("SetActionsState", {
                  btn: "submit",
                  state: true
                });
                this.submit().then(res => {
                  if (res.data.code === 200) {
                    this.taskId = res.data.data
                    this.startTimer()
                  } else {
                    this.$emit("SetActionsState", {
                      btn: "submit",
                      state: false
                    });
                    this.$Message.error({
                      content: res.data.msg || '更新失败',
                      duration: 3
                    })
                  }
                }).catch(err => {
                  this.$Message.error({
                    content: err || '更新失败',
                    duration: 3
                  })
                  this.$emit("SetActionsState", {
                    btn: "submit",
                    state: false
                  });
                })
              })
            }
          })
        }
      },
      {
        text: '取消',
        handle: () => {
          this.$emit("Close");
        }
      },
    ]);
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    startTimer(){
      this.timer = setInterval(this.queryPermissionSubmitStatus, 2000); // 注意: 第一个参数为方法名的时候不要加括号;
    },
    endTimer() {
      clearInterval(this.timer)
      this.timer = null
    },
    submit() {
      const params = {reportName: this.reportName, ...this.modelForm}
      return sysConfigApi.permissionSubmit(params)
    },
    queryPermissionSubmitStatus() {
      sysConfigApi.queryPermissionSubmitStatus({id: this.taskId}).then(res => {
        if (res.data.code === 200) {
          if (res.data.data != '0') {
            this.$Message.success({
              content: '更新成功',
              duration: 3
            })
            this.endTimer()
            this.$emit("SetActionsState", {
              btn: "submit",
              state: false
            });
            this.$emit("Close", true);
          }
        } else {
          this.endTimer()
          this.$Message.error({
            content: res.data.msg || '更新失败',
            duration: 3
          })
          this.$emit("SetActionsState", {
            btn: "submit",
            state: false
          });
        }
      }).catch(err => {
        this.$Message.error({
          content: err || '更新失败',
          duration: 3
        })
        this.endTimer()
        this.$emit("SetActionsState", {
          btn: "submit",
          state: false
        });
      })
    }
  }
}
</script>

<style lang="less" scoped>
.editConfig {
  height: 100%;
}
</style>
